﻿@using ViewRes
@using System.Collections.Generic
@using DataLayer.Entities
@model IList<Donut>

@section Title{
    @Shared.Donuts
}

@section Pagename{
    @Shared.Donuts
}

@section Styles{

    <link href="@Url.Content("~/css/jcarousel.css")" rel="stylesheet" />
}

@section Scripts{
    <script type="text/javascript" src="@Url.Content("~/javascript/jquery.jCarousel.js")" ></script>

    <script type="text/javascript">
        // This is the connector function.
        // It connects one item from the navigation carousel to one item from the
        // stage carousel.
        // The default behaviour is, to connect items with the same index from both
        // carousels. This might _not_ work with circular carousels!
        var connector = function (itemNavigation, carouselStage) {
            return carouselStage.jcarousel('items').eq(itemNavigation.index());
        };

        $(function () {
            // Setup the carousels. Adjust the options for both carousels here.
            var carouselStage = $('.carousel-stage').jcarousel();
            var carouselNavigation = $('.carousel-navigation').jcarousel();

            // We loop through the items of the navigation carousel and set it up
            // as a control for an item from the stage carousel.
            carouselNavigation.jcarousel('items').each(function () {
                var item = $(this);

                // This is where we actually connect to items.
                var target = connector(item, carouselStage);

                item
                    .on('jcarouselcontrol:active', function () {
                        carouselNavigation.jcarousel('scrollIntoView', this);
                        var name = target.find("img").attr('donut-name');
                        var des = target.find("img").attr('donut-des');

                        $("#donutName h2").html(name);
                        $("#donutDes").html(des);

                        item.addClass('active');
                    })
                    .on('jcarouselcontrol:inactive', function () {
                        item.removeClass('active');
                    })
                    .jcarouselControl({
                        target: target,
                        carousel: carouselStage
                    });
            });
            
            // Setup controls for the navigation carousel
            $('.prev-navigation')
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '-=1'
                });

            $('.next-navigation')
                .on('jcarouselcontrol:inactive', function () {
                    $(this).addClass('inactive');
                })
                .on('jcarouselcontrol:active', function () {
                    $(this).removeClass('inactive');
                })
                .jcarouselControl({
                    target: '+=1'
                });
        });
    </script>
}

<div class="connected-carousels">
    <div class="stage-container">
        <div class="stage">
            <div class="carousel carousel-stage" data-jcarousel="true">
                <ul>
                    @foreach (Donut donut in Model)
                    {
                        <li>
                            <img src="@donut.Url" donut-name="@donut.Name" donut-des="@donut.Description" />
                        </li>
                    }
                </ul>
            </div>
            @*<a href="#" class="prev prev-stage" data-jcarouselcontrol="true"><span>‹</span></a>
            <a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a>*@
        </div>
        <div class="stage-information">
            <div id="donutName">
                <h2></h2>
            </div>
            <div id="donutDes"></div>
        </div>
    </div>
    <div class="navigation">
        <a href="#" class="prev prev-navigation" data-jcarouselcontrol="true">‹</a>
        <a href="#" class="next next-navigation inactive" data-jcarouselcontrol="true">›</a>
        <div class="carousel carousel-navigation" data-jcarousel="true">
            <ul style="left: -120px; top: 0px;">
                @foreach (Donut donut in Model)
                {
                    <li>
                        <img src="@donut.Url" width="50" height="50" />
                    </li>
                }
            </ul>
        </div>
    </div>
</div>
